<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星巴克|饮品</title>
    <link rel="icon" href="./img/logoico.ico" />
    <!-- <link rel="stylesheet" href="./CSS/reset.css"> -->
    <link rel="stylesheet" href="./CSS/style10.css">
</head>


<body>
    <section>
        <div class="circle"></div>
        <header>
            <a> <img src="./img/logo-cafe.png" alt="" class="logo"></a>
            <ul class="clearfix">
                <li><a href="">hone</a></li>
                <li><a href="">menu</a></li>
                <li><a href="">what's new</a></li>
                <li><a href="">contact</a></li>
            </ul>
        </header>
  

    <div class="center">
        <div class="textbox">
            <h2>It can satisfy your coffee desire<br> &nbsp; it's &nbsp; <span> Starbucks</span></h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum rem vero aspernatur perferendis modi magni,
                quibusdam sapiente culpa blanditiis nostrum voluptatibus, voluptatum vitae tempore optio, qui saepe quas
                reiciendis dicta.</p>
                <a href="">learn more</a>
        </div>
<div class="imgbox">
    <img src="./img/img1.png" alt="" title="Starbucks" class="Starbucks">
</div>
    </div>

    <ul class="thumb">
        <li><img src="./img/thumb1.png" alt="" onclick="imgSlider('./img/img1.png');changecolor('#017143')"></li>
        <li><img src="./img/thumb2.png" alt="" onclick="imgSlider('./img/img2.png');changecolor('#eb7495')"></li>
        <li><img src="./img/thumb3.png" alt="" onclick="imgSlider('./img/img3.png');changecolor('#d752b1')"></li>
        <!-- <li><img src="./img/img1.png" alt=""></li> -->
    </ul>
   <ul class="sci">
   <li><a href=""><img src="./img/instagram.png" alt="" ></a></li>
   <li><a href=""><img src="./img/twitter.png" alt="" ></a></li>
   <li><a href=""><img src="./img/facebook.png" alt="" ></a></li>
   </ul>

</section>

</body>

</html>


<script type="text/javascript">
    function imgSlider(anything){
	document.querySelector('.Starbucks').src = anything;
}
function changecolor(anything){
	document.querySelector('.circle').style.background= anything;
}

// function changecolor(color){
//     const circle = document.querySelector('.circle');
//     circle.style.background=color;
// }
    </script>